<template>
  <div class="container">
    <van-sticky>
      <div class="line-size coupon-tabs">
        <van-tabs :active="activeIndex" @change="tabClick" color="#FFE100" :border="false">
          <van-tab :title="item" v-for="(item, index) in statusList" :key="index"></van-tab>
        </van-tabs>
      </div>
    </van-sticky>
    <div class="pull-refresh">
      <div class="list">
        <div v-for="(item, index) in dataList" :key="index" class="mar-b-15">
          <coupon v-if="item" :coupon="item" :showExpend="true" :btntype="btntype" :actionId="item.actionId" @click="toSuitGoods"></coupon>
        </div>
      </div>
      <div class="height-50"></div>
      <div class="flex flex-center height-50 more-c-footer"
        @click="$pt.navigateTo({url: '/pages/personal/coupon/coupon-center/main'})">
        <div class="flex-center v-align-c">
          <span class="mar-r-5 font-17 font-w">领更多好券</span>
          <img v-if="fileSpace" :src="fileSpace + '/images/icon-arrow-circle.png'" class="width-15 height-15 mar-b--1" alt="">
        </div>
      </div>
      <div class="pad-10 mar-t-10 align-c" v-if="nodata">
        <img v-if="fileSpace" mode="widthFix" class="width-153 height-75 mar-t-30" :src="fileSpace + '/images/2-0-kong.png'"/>
        <div class="pad-t-20 font-14 font-gray">空空如也</div>
      </div>
    </div>
  </div>
</template>

<script>
  import { pageMyCoupon } from '@/api/personal'
  import Coupon from '@/components/Coupon'
  export default {
    components: { Coupon },
    data() {
      return {
        statusList: ['待使用', '已使用', '已失效'],
        activeIndex: 0,
        currentPage: 1,
        dataList: [],
        pullLoad: {
          loading: false,
          finished: false
        },
        params: {
          size: 10,
          currentPage: 1,
          memberId: '',
          customerMemberId: '',
          useStatus: 0
        },
        statusBarHeight: 0,
        nodata: false
      }
    },
    computed: {
      btntype() {
        let type = 2
        switch (this.activeIndex) {
          case 0:
            type = 2
            break
          case 1:
            type = 3
            break
          case 2:
            type = 4
            break
          default:
            break
        }
        return type
      }
    },
    onLoad() {
      // 初始化data
      Object.assign(this.$data, this.$options.data())
      this.statusBarHeight = this.$pt.getSystemInfoSync()['statusBarHeight'] + 44
    },
    mounted() {
      this.params.memberId = this.getMemberId
      this.params.customerMemberId = this.getCustomerId
      this.pageMyCoupon()
    },
    onPullDownRefresh() {
      // 下拉刷新
      this.dataList = []
      this.params.currentPage = 1
      this.pageMyCoupon()
      setTimeout(() => {
        this.$pt.stopPullDownRefresh()
      }, 500)
    },
    onReachBottom() {
      // 触底刷新
      if (!this.pullLoad.finished) {
        this.pageMyCoupon()
      }
    },
    methods: {
      tabClick(e) {
        this.dataList = []
        this.params.currentPage = 1
        this.activeIndex = e.mp.detail.index
        this.params.useStatus = this.activeIndex
        this.pullLoad.finished = false
        this.nodata = false
        this.pageMyCoupon()
      },
      pageMyCoupon() {
        this.nodata = false
        this.$pt.showLoading({
          title: '加载中',
          mask: true
        })
        pageMyCoupon(this.params).then((response) => {
          this.$pt.hideLoading()
          if (response.isError) return
          response.data.records.forEach(item => {
            item.validStartTime = item.validStartTime.split(' ')[0]
            item.validEndTime = this.isToday(item.validEndTime)
            if (item.cashAmount) {
              // item.cashAmount = '11933.11'
              item.cashAmount = parseFloat(item.cashAmount)
              item.cashPriceLength = item.cashAmount.toString().length
            }
            if (item.reduceAmount) {
              // item.reduceAmount = '12339.21'
              item.reduceAmount = parseFloat(item.reduceAmount)
              item.reducePriceLength = item.reduceAmount.toString().length
            }
            if (item.discountPercent) item.discountPercent = parseFloat(item.discountPercent)
            item.isUseable = this.isUseable(item.validStartTime)
            item.expend = false
            this.dataList.push(item)
          })
          if (response.data.total === 0) {
            // 如果总数据长度为0 则显示暂无数据
            this.nodata = true
          }
          this.params.currentPage++
          if (this.dataList.length === 0 || this.dataList.length >= response.data.total) {
            this.pullLoad.finished = true
          }
        }).catch(() => {
        })
      },
      toSuitGoods(item) {
        if (this.activeIndex !== 0) return
        if (!this.getShowBuyCard) return
        this.$pt.navigateTo({url: `/pages/personal/coupon/suit-goods/main?couponId=${item.couponId}&actionId=${item.actionId}&memberCouponId=${item.memberCouponId}&myCoupon=${true}`})
      },
      isToday(date) {
        let today = new Date().toLocaleDateString()
        let tsDate = date.split(' ')[0].replace(/-/g, '/')
        if (new Date(tsDate).getTime() === new Date(today).getTime()) return 'today'
        return date.split(' ')[0]
      },
      isUseable(date) {
        let today = new Date().toLocaleDateString()
        let tsDate = date.split(' ')[0].replace(/-/g, '/')
        if (new Date(tsDate).getTime() > new Date(today).getTime()) {
          return false
        } else {
          return true
        }
      }
    }
  }
</script>

<style lang="less" scoped>
@light-orange: #FF593E;
@drak-orange: #EC3B1F;
.container{
  background: #f5f5f5;
  min-height: calc(100vh);
  overflow: hidden;
  .coupon-tabs{
    /deep/ .van-tabs__line{
      width: 34px !important;
      left: 14px;
    }
  }
  .list{
    padding: 15px 15px 0;
    &__item{
      width: 345px;
      border-radius: 8px;
      display: flex;
      &.grayscale{
        filter: grayscale(100%);
      }
    }    
    &__wrap{
      position: relative;
      width: 100%;
      min-height: 115px;
      &.grayscale{
        filter: opacity(50%);
      }
    }
    &__content{
      display: flex;
      width: 100%;
      height: 115px;
      background: radial-gradient(circle at right top, transparent 6px, #fff 0) top left / 105px 51% no-repeat,
        radial-gradient(circle at right bottom, transparent 6px, #fff 0) bottom left / 105px 51% no-repeat,
        radial-gradient(circle at left top, transparent 6px, #fff 0) top right / 241px 51% no-repeat,
        radial-gradient(circle at left bottom, transparent 6px, #fff 0) bottom right / 241px 51% no-repeat;
      // filter: drop-shadow(0px 0px 10px rgba(155, 155, 155, 0.11));
      border-radius: 8px;
      position: relative;
    }
    &__coupon-title{
      max-height: 42px;
      line-height: 1.4;
      overflow:hidden;
      text-overflow:ellipsis;
      display:-webkit-box;
      -webkit-line-clamp:2;
      -webkit-box-orient:vertical;
      word-break:break-word;
    }
    &__border{
      width: 4px;
      height: 115px;
      position: relative;
      left: 0;
      top: 0;
      background-color: @light-orange;      
      overflow: hidden;
    }
    &__left{
      display: flex; 
      border-radius: 8px 0 0 8px;
      overflow: hidden;
    }
    &__coupon-wrap{
      width: 94px;
      padding-right: 6px;
      height: 100%;
      color: @light-orange;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      line-height: 1;
    }
    &__arrow--bottom{
      position: absolute;
      bottom: 5px;
      right: 10px;
    }
    &__coupon-price{
      display: flex;
      align-items: flex-end;
    }
    &__price{
      font-size: 36px;
      font-weight: bold;
    }
    &__price-small{ 
      font-size: 32px;
    }
    &__price-txt{
      font-size: 24px!important;
      font-weight: bold;
    }
    &__right{
      padding: 0 10px 0 15px;
      height: 100%;
      display: flex;
      justify-content: space-between;
    }
    &__coupon-content{
      line-height: 1;
      height: 100%;
      width: 150px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: flex-start;
    }
    &__collect--yes{
      width: 50px;
      height: 22px;
      line-height: 22px;
      background-color: @light-orange;
      border: @light-orange 1px solid;
      color: #fff;
      font-size: 11px;
      text-align: center;
      margin-top: 30px;
      border-radius: 11px;
    }
    &__collect--no{
      width: 62px;
      height: 22px;
      line-height: 22px;
      background-color: #fff;
      border: @light-orange 1px solid;
      color: #FF593E;
      font-size: 11px;
      text-align: center;
      margin-top: 30px;
      border-radius: 11px;
    }
    &__expend{
      background: white;
      margin-left: 4px;
      width: calc(100% - 4px);
      border-radius:  0 0 8px 8px;
      margin-top: -7px;
      height: 0px;
      overflow: hidden;
      line-height: 1;
      transition: all .5s;
      position: relative;
    }
    &__expend--true{
      height: auto;
      &::before{
        content: '';
        position: absolute;
        top: 7px;
        width: calc(100% - 28px);
        left: 14px;
        border-top: 0.5px dashed rgba(255, 89, 62, 0.5);
      }
    }
    &__ul{
      font-size: 12px;
      padding: 0 10px;
      line-height: 1;
      margin-top: 23px;
      li{
        display: flex;
        align-items: center;
        margin-bottom: 9.5px;
        &:last-child{
          margin-bottom: 13px;
        }
        .round-point{
          width: 3px;
          height: 3px;
          border-radius: 50%;
          background-color: #333333;
          margin-right: 5px;
        }
      }
    }
  }
  .more-c-footer{
    background: #fff;
    box-shadow:0px 0px 10px 0px rgba(155, 155, 155, 0.15);
    position: fixed;
    width: 100%;
    left: 0;
    color: #FF593E;
    bottom: 0;
    z-index: 10;
  }
}
</style>
